<template>
	<view class="login-container">

		<!-- <view class="wechatapp"> -->
			<!-- <view class="header"> -->
				<!-- #ifdef MP-WEIXIN -->
				<!-- <open-data class="" type="userAvatarUrl"></open-data> -->
				<!-- #endif -->
			<!-- </view> -->
			<view class="tb2">
				<view class="touxiang">
					<text>*</text>头像
				</view>
				<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar" class="button">
					<image :src="avatarUrl" class="tupian">
					</image>
				</button>
			</view>
		<!-- </view> -->
		<view class="auth-title">申请获取以下权限</view>
		<view class="auth-subtitle">获得你的公开信息（昵称、头像等）</view>
		<view class="tb1">
			<view class="tb1-nackname">
				<text>*</text>昵称
			</view>
			<input class="kg" type="nickname" :value="nickName" @blur="bindblur" placeholder="请输入昵称"
				@input="bindinput" />
		</view>
		<!-- <view class="tb1">
			<text>*</text>头像
			<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar" class="bx">
				<image :src="avatarUrl" class="tupian">
				</image>
			</button>
		</view> -->
		<view class="login-btn">
			<!-- #ifdef MP-WEIXIN -->
			<button class="btn-normal" @click="getUserInfo">授权登录</button>
			<!-- #endif -->
		</view>
		<view class="no-login-btn">
			<button class="btn-normal" @click="onNotLogin">暂不登录</button>
		</view>
	</view>
</template>
<!-- 				this._post('user.user/login', {

				}, result => {

				}); -->
<script>
	export default {
		data() {
			return {
				background: '',
				listData: [],
				nickName:'',
				avatarUrl: ''
			}
		},
		onShow() {
			//wx.login(); //重新登录
		},
		onLoad() {

		},

		methods: {
			onChooseavatar(e) {
				self = this
				uni.uploadFile({
					url: "https://jiechendy.sdshengyue.cn/index.php/shop/file.upload/image", //接口路由
					filePath: e.detail.avatarUrl, //要传递图片的临时路径z
					name: 'iFile', //后台接口名字，
					success: (res) => {
						let data = JSON.parse(res.data)
						self.avatarUrl = data.data.file_path
						self.titel = ""
					},
				})
			},
			// onChooseavatar(e){
			// 	this.avatarUrl = e.detail.avatarUrl;
			// 	console.log(this.avatarUrl,'this.avatarUrl');
			// },
			bindblur(e) {
				// 获取微信昵称
				this.nickName = e.detail.value;
			},
			bindinput(e) {
				//这里要注意如果只用blur方法的话用户在输入玩昵称后直接点击保存按钮，会出现修改不成功的情况。
				this.nickName = e.detail.value;
			},
			/*改变发送验证码按钮文本*/
			changeMsg() {
				if (this.second > 0) {
					this.send_btn_txt = this.second + '秒';
					this.second--;
					setTimeout(this.changeMsg, 1000);
				} else {
					this.send_btn_txt = '获取验证码';
					this.second = 60;
					this.is_send = false;
				}
			},
			onNotLogin: function() {
				this.gotoPage('/pages/index/index')

			},
			getUserInfo: function() {
				let self = this;
				if (self.nickName == "") {
					uni.showToast({
						icon: 'error',
						title: '请输入昵称'
					})
					return false;
				}
				if (self.avatarUrl == "") {
					uni.showToast({
						icon: 'error',
						title: '请选择头像'
					})
					return false;
				}
				wx.getUserProfile({
					lang: 'zh_CN',
					desc: '用于完善会员资料',
					success: (res) => {
						console.log(res);
						if (res.errMsg !== 'getUserProfile:ok') {
							return false;
						}
						uni.showLoading({
							title: "正在登录",
							mask: true
						});
						let data = JSON.parse(res.rawData)
						data.nickName = self.nickName
						data.avatarUrl = self.avatarUrl
			
						// if(self.nickName!=''){
						// 	res.rawData.nickName=self.nickName
						// }
			
						// 执行微信登录
						wx.login({
							success(res_login) {
								// 发送用户信息
								self._post('user.user/wxlogin', {
									code: res_login.code,
									user_info: JSON.stringify(data),
									encrypted_data: encodeURIComponent(res.encryptedData),
									iv: encodeURIComponent(res.iv),
									signature: res.signature,
									referee_id: uni.getStorageSync('referee_id'),
									source: 'wx',
								}, result => {
									// 记录token user_id
									uni.setStorageSync('token', result.data.token);
									uni.setStorageSync('user_id', result.data.user_id);
									// 执行回调函数
									uni.navigateBack();
								}, false, () => {
									uni.hideLoading();
								});
							}
						});
					}
				});
			},
		},
	}
</script>

<style>
	.kg{
		font-size: 30rpx;
		margin-top: 20rpx;
	}
	.tb1-nackname{
		font-size: 30rpx
	}
	.tb2{
		height: 320rpx;
	}
	.login-container{
		position: relative;
	}
	.tb1{
		margin-bottom:47rpx;
		/* position: relative; */
	}
	.button{
		position: absolute;
		left: 50%;
		top: 100rpx;
		transform: translate(-50%,0);
		width: 250rpx;
		
		 border-radius: 50%;
	}

	.touxiang{
		text-align: center;
		margin-top: 10rpx;
		font-size: 30rpx;
	}
	.tupian{
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		border: 1rpx solid #ccc;
	}
	.login-container {
		padding: 30rpx;
	}

	.wechatapp {
		padding: 80rpx 0 48rpx;
		border-bottom: 1rpx solid #e3e3e3;
		margin-bottom: 72rpx;
		text-align: center;
	}

	.wechatapp .header {
		width: 190rpx;
		height: 190rpx;
		border: 2px solid #fff;
		margin: 0rpx auto 0;
		border-radius: 50%;
		overflow: hidden;
		box-shadow: 1px 0px 5px rgba(50, 50, 50, 0.3);
	}

	.auth-title {
		color: #585858;
		font-size: 34rpx;
		margin-bottom: 40rpx;
	}

	.auth-subtitle {
		color: #888;
		margin-bottom: 88rpx;
		font-size: 28rpx;
	}

	.login-btn {
		padding: 0 20rpx;
	}

	.login-btn button {
		height: 88rpx;
		line-height: 88rpx;
		background: #4386d6;
		color: #fff;
		font-size: 30rpx;
		border-radius: 999rpx;
		text-align: center;
		margin-top: 100rpx;
	}

	.no-login-btn {
		margin-top: 20rpx;
		padding: 0 20rpx;
	}

	.no-login-btn button {
		height: 88rpx;
		line-height: 88rpx;
		background: #dfdfdf;
		color: #fff;
		font-size: 30rpx;
		border-radius: 999rpx;
		text-align: center;
	}
</style>